<template>
  <div class="dialog-mask" @click.self="$emit('close')">
    <div class="dialog-content">
      <h3>用户注册</h3>
      <div class="form-row">
        <label>用户名</label>
        <input v-model="username" placeholder="请输入用户名" />
      </div>
      <div class="form-row">
        <label>账号</label>
        <input
          v-model="account"
          placeholder="账号"
          class="input"
          maxlength="10"
          type="text"
          @input="onAccountInput"
        />
      </div>
      <div class="form-row">
        <label>密码</label>
        <input v-model="password" type="password" placeholder="请输入密码" />
      </div>
      <div class="dialog-actions">
        <button class="btn confirm" @click="handleRegister">注册</button>
        <button class="btn cancel" @click="$emit('close')">取消</button>
      </div>
    </div>
    <div v-if="showMsg" class="custom-alert-mask">
      <div class="custom-alert-box">
        <div class="custom-alert-content">{{ msgContent }}</div>
        <button class="custom-alert-btn" @click="showMsg = false">知道了</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from '../axios';

const emit = defineEmits(['close', 'success']);
const username = ref('');
const account = ref('');
const password = ref('');
const showMsg = ref(false);
const msgContent = ref('');

const onAccountInput = (e) => {
  // 只保留数字，且不超过10位
  account.value = e.target.value.replace(/\D/g, '').slice(0, 10);
};

const handleRegister = async () => {
  if (!username.value || !account.value || !password.value) {
    showAlert('请填写完整信息');
    return;
  }
  if (!/^\d{10}$/.test(account.value)) {
    showAlert('账号必须为10位数字');
    return;
  }
  try {
    const res = await axios.get('/user/doRegister', {
      params: {
        username: username.value,
        account: account.value,
        password: password.value
      }
    });
    if (res.data && res.data.code === 200) {
      showAlert('注册成功，请登录！');
      emit('success', { account: account.value, password: password.value });
      emit('close');
      account.value = '';
      password.value = '';
    } else {
      showAlert('注册失败: ' + (res.data?.msg || '未知错误'));
    }
  } catch (e) {
    showAlert('注册接口异常');
  }
};
function showAlert(msg) {
  msgContent.value = msg;
  showMsg.value = true;
}
</script>

<style scoped>
.custom-alert-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.custom-alert-box {
  background: #f7faff;
  border: 2px solid #409eff;
  border-radius: 14px;
  padding: 28px 32px 20px 32px;
  min-width: 220px;
  box-shadow: 0 4px 24px #409eff22;
  text-align: center;
}
.custom-alert-content {
  color: #3076c9;
  font-size: 17px;
  margin-bottom: 18px;
  font-weight: bold;
  letter-spacing: 1px;
}
.custom-alert-btn {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px #409eff33;
}
.custom-alert-btn:hover {
  background: linear-gradient(90deg, #3076c9 0%, #409eff 100%);
}
.dialog-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.dialog-content {
  background: #fff;
  border-radius: 10px;
  padding: 32px 28px 24px 28px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 4px 24px #409eff22;
  text-align: center;
}
h3 {
  margin: 0 0 18px 0;
  font-size: 22px;
  font-weight: 600;
}
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  gap: 10px;
  justify-content: center;
}
.form-row label {
  min-width: 56px;
  font-size: 16px;
  color: #333;
}
.form-row input {
  width: 180px;
  padding: 8px 10px;
  border: 1px solid #e0e3e8;
  border-radius: 6px;
  font-size: 16px;
  outline: none;
  background: #f9fafb;
  transition: border 0.2s;
}
.form-row input:focus {
  border: 1.5px solid #409eff;
  background: #fff;
}
.dialog-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}
.btn {
  min-width: 80px;
  padding: 9px 0;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.confirm {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
}
.confirm:hover {
  background: linear-gradient(90deg, #3076c9 0%, #409eff 100%);
}
.cancel {
  background: #f2f3f5;
  color: #666;
}
.cancel:hover {
  background: #e0e3e8;
}
</style>
